<template>
	<gui-page :customHeader="false" :fullPage="true" :isHeaderSized="false">
		<template v-slot:gBody>
			<view class="">
				<view class="gui-bg-white gui-dark-bg-level-1 gui-padding gui-flex gui-align-items-center">
					<gui-search placeholder="搜索名称" @confirm="confirmSearch"></gui-search>
					<text class="gui-icons gui-block gui-color-black gui-text" style="margin-left: 20rpx; font-size: 36rpx">&#xe61d;</text>
				</view>
				<view class="gui-flex1 gui-flex gui-column">
					<scroll-view @scrolltolower="(e) => loadMore(e, 1)" :scroll-y="true" :style="{ height: dataRec.mainHeight + 'px' }">
						<template v-if="dataRec.tabone.length">
							<view class="bottomPlaceholder"></view>
							<view class="item-card gui-padding gui-bg-white gui-border-radius-small gui-box-shadow-shallow" v-for="item of dataRec.tabone" :key="item.id">
								<view class="" @click="toDetail(item.id)">
									<view class="gui-flex gui-space-between">
										<view class="gui-color-gray">入库编号：{{item.orderno}}</view>
										<view class="gui-primary-color">{{item.kuwei_title}}</view>
									</view>
									<view class="gui-h5 gui-bold gui-margin-top">{{item.title}}</view>
									<view class="gui-border-radius gui-bg-grey7 gui-flex gui-space-between" style="margin-top:20rpx;padding: 26rpx 20rpx;">
										<view class="gui-text-center">
											<view class="gui-text gui-color-grey1 gui-text-small">种子分类</view>
											<view class="gui-text gui-color-black gui-text-small" style="margin-top: 10rpx;">{{item.zhiliang_title}}</view>
										</view>
										<view class="gui-text-center">
											<view class="gui-text gui-color-grey1 gui-text-small">箱号</view>
											<view class="gui-text gui-color-black gui-text-small" style="margin-top: 10rpx;">{{item.xianghao}}</view>
										</view>
										<view class="gui-text-center">
											<view class="gui-text gui-color-grey1 gui-text-small">数量</view>
											<view class="gui-text gui-color-black gui-text-small" style="margin-top: 10rpx;">{{item.num}}粒</view>
										</view>
										<view class="gui-text-center">
											<view class="gui-text gui-color-grey1 gui-text-small">重量</view>
											<view class="gui-text gui-color-black gui-text-small" style="margin-top: 10rpx;">{{item.weight}}g</view>
										</view>
									</view>
								</view>
							</view>
							<view class="bottomPlaceholder"></view>
						</template>
						<template v-else>
							<view class="gui-padding">
								<gui-empty>
									<template v-slot:img>
										<view class="gui-flex gui-rows gui-justify-content-center" style="font-size: 144rpx">
											<text class="gui-icons gui-empty-icon gui-color-gray">&#xe644;</text>
										</view>
									</template>
									<template v-slot:text>
										<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray" style="font-size: 34rpx">暂无数据</text>
									</template>
								</gui-empty>
							</view>
						</template>
					</scroll-view>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script setup>
import { Local } from '@utils/storage.js';
import imgArr from '@assets/js/export.js';
import graceJS from '@/Grace6/js/grace.js';
import { inventory_listsApi } from '@api/repertory.js';
import { reactive, ref, toRefs, onMounted, onActivated } from 'vue';
import { onShow } from '@dcloudio/uni-app';

let imgArrReactive = reactive(imgArr);
let dataRec = reactive({
	tabone: [],
	mainHeight: 0,
	title:'',
});

let confirmSearch = (e) => {
	dataRec.title = e;
	getListData();
};
let toDetail = (id) => {
	uni.navigateTo({
		url:"/pages/repertory/repertoryDetail?id="+id
	})
}
// 请求数据方法 只有一个 根据type切换
let getListData = async() => {
	let res = await inventory_listsApi({title:dataRec.title});
	dataRec.tabone = res.data.data;
};
let loadMore = (e, type) => {
	console.log(e, type);
	// 判断是否为最后一页
	// 根据type去请求数据
	// 获取数据后 拼接到data中 可以用 ... 展开操作符合并
};
onShow(() => {
	getListData();
});
onMounted(async () => {
	let systemInfo = await uni.getSystemInfoSync();
	let windowHeight = systemInfo.windowHeight;
	let scrollHeight = windowHeight - uni.upx2px(126); // 40px状态栏+header 20px自定义组件高度 63px 搜索栏高度 50px 选项卡高度
	dataRec.mainHeight = scrollHeight;
	
});
</script>
<style lang="scss" scoped>
.bottomPlaceholder {
	height: 4rpx;
}
.item-card {
	margin: 0 30rpx 20rpx;
}
</style>
